<template>
  <div class="orderItem">
    <div class="make">
      <div class="leftImg">
        <img :src="prop[0].smallImg" class="auto-img" />
      </div>
      <div class="makeText">
        <div class="zn-name">{{ prop[0].name }}</div>
        <div class="countShop">等共{{ prop.length }}件商品</div>
        <div class="price">￥{{ totalPrice }}</div>
      </div>
      <div class="right">已完成</div>
    </div>
    <div class="makeBottom">
      <div class="oid">{{prop[0].oid}}</div>
      <div class="making" @click="recur">再来一单</div>
    </div>
  </div>
</template>
<script>
export default {
  name: "orderList",
  data() {
    return {
      totalPrice: 0,
    };
  },
  props: {
    prop: {
      type: Array,
      default() {
        return {};
      },
    },
  },
  methods:{
    recur(){
        this.$router.push({name:"Detail",params:{pid:this.prop[0].pid}})
    }
  },
  created() {
    this.prop.forEach((item) => {
      this.totalPrice += Number(item.price) * item.count;
    });
  },
};
</script>
<style lang="less" scoped>
@import url("../assets/base.less");
.orderItem {
  height: 160px;
  overflow: hidden;
  border-radius: 10px;
  background-color: #fff;
  margin-top: 20px;
  box-shadow: 0px 2px 8px rgb(204, 200, 200);
  .make {
    height: 120px;
    display: flex;
    align-items: center;
    padding: 0px 25px;
    .leftImg {
      height: 70px;
      width: 70px;
    }
    .makeText {
      height: 70px;
      margin-left: 20px;
      .zn-name {
        font-size: 15px;
        font-weight: bold;
      }
      .countShop {
        color: #bebebe;
        margin-top: 5px;
      }
      .price {
        font-size: 12.5px;
        color: #939393;
        margin-top: 10px;
      }
    }
    .right {
      height: 70px;
      color: #bebebe;
      margin-left: auto;
    }
  }
  .makeBottom {
    height: 40px;
    width: 90%;
    margin: 0px auto;
    border-top: 1px solid #e8e8e8;
    display: flex;
    align-items: center;
    color: #aca7a7;
    font-size: 6px;
    .oid{
      flex-basis: 50%;
    }
    .making {
      margin-left: auto;
      height: 22px;
      color: #fff;
      text-align: center;
      border-radius: 20px;
      line-height: 22px;
      flex-basis:20%;
      background-color: @importance;
    }
  }
}
</style>